<!--
  演出编辑页面
-->
<template>
  <div class="m-l-100 m-t-20">
    <BasicForm
      @register="register"
      @submit="handleSubmit"
    >
      <template #customSlot="{ model, field }">
        <OnlineSeatSelection
          :seatData="seatData"
          @clickSeat="clickSeat"
        />
      </template>
    </BasicForm>
  </div>
</template>
<script lang="tsx" setup>
import {h, ref} from 'vue';
import {FormSchema, BasicForm, useForm} from "@/components/Form";
import {Tinymce} from "@/components/Tinymce";
import OnlineSeatSelection from "./components/onlineSeatSelection.vue";
import {useMessage} from "@/hooks/web/useMessage";
import {uploadApi} from "@/api/sys/upload";
const { createMessage } = useMessage();

const seatMessage = [
  {
    rowKey: 1,
    col: [
      {
        colKey: 1,
        status: 1
      },
      {
        colKey: 2,
        status: 0
      },
      {
        colKey: 3,
        status: 1
      },
      {
        colKey: 4,
        status: 0
      },
      {
        colKey: 5,
        status: 0
      },
    ]
  },
  {
    rowKey: 2,
    col: [
      {
        colKey: 1,
        status: 0
      },
      {
        colKey: 2,
        status: 0
      },
      {
        colKey: 3,
        status: 0
      },
      {
        colKey: 4,
        status: 0
      },
      {
        colKey: 5,
        status: 0
      },
    ]
  },
  {
    rowKey: 3,
    col: [
      {
        colKey: 1,
        status: 1
      },
      {
        colKey: 2,
        status: 0
      },
      {
        colKey: 3,
        status: 1
      },
      {
        colKey: 4,
        status: 1
      },
      {
        colKey: 5,
        status: 1
      },
    ]
  },
  {
    rowKey: 4,
    col: [
      {
        colKey: 1,
        status: 1
      },
      {
        colKey: 2,
        status: 1
      },
      {
        colKey: 3,
        status: 1
      },
      {
        colKey: 4,
        status: 1
      },
      {
        colKey: 5,
        status: 1
      },
    ]
  },
  {
    rowKey: 5,
    col: [
      {
        colKey: 1,
        status: 0
      },
      {
        colKey: 2,
        status: 0
      },
      {
        colKey: 3,
        status: 0
      },
      {
        colKey: 4,
        status: 0
      },
      {
        colKey: 5,
        status: 0
      },
    ]
  },
]

// 已经禁用的座位号
const stopSeat = ref();
// status: 1 (不可选) 0 (可选)
const seatData = ref([
  {
    rowKey: 1,
    col: [
      {
        colKey: 1,
        status: 0
      },
      {
        colKey: 2,
        status: 0
      },
      {
        colKey: 3,
        status: 0
      },
      {
        colKey: 4,
        status: 0
      },
      {
        colKey: 5,
        status: 0
      },
    ]
  },
  {
    rowKey: 2,
    col: [
      {
        colKey: 1,
        status: 0
      },
      {
        colKey: 2,
        status: 0
      },
      {
        colKey: 3,
        status: 0
      },
      {
        colKey: 4,
        status: 0
      },
      {
        colKey: 5,
        status: 0
      },
    ]
  },
  {
    rowKey: 3,
    col: [
      {
        colKey: 1,
        status: 0
      },
      {
        colKey: 2,
        status: 0
      },
      {
        colKey: 3,
        status: 0
      },
      {
        colKey: 4,
        status: 0
      },
      {
        colKey: 5,
        status: 0
      },
    ]
  },
  {
    rowKey: 4,
    col: [
      {
        colKey: 1,
        status: 0
      },
      {
        colKey: 2,
        status: 0
      },
      {
        colKey: 3,
        status: 0
      },
      {
        colKey: 4,
        status: 0
      },
      {
        colKey: 5,
        status: 0
      },
    ]
  },
  {
    rowKey: 5,
    col: [
      {
        colKey: 1,
        status: 0
      },
      {
        colKey: 2,
        status: 0
      },
      {
        colKey: 3,
        status: 0
      },
      {
        colKey: 4,
        status: 0
      },
      {
        colKey: 5,
        status: 0
      },
    ]
  },
])

// 表单项的schema
const schemas: FormSchema[] = [
  {
    field: 'serialNumber',
    component: 'Input',
    label: '编号',
    colProps: {span: 14},
    dynamicDisabled: true,
  },
  {
    field: 'name',
    component: 'Input',
    label: '名称',
    colProps: {span: 14},
    rules: [
      {required: true}
    ]
  },
  {
    field: 'type',
    component: 'Select',
    label: '类型',
    colProps: {span: 14},
    rules: [
      {required: true}
    ],
    componentProps: {
      options: [
        {
          label: '文艺演出',
          value: '1',
          key: '1',
        },
        {
          label: '工艺电影',
          value: '2',
          key: '2',
        }
      ]
    }
  },
  {
    field: 'type',
    component: 'Upload',
    label: '封面图片',
    helpMessage: '图片建议尺寸为480px*360px',
    colProps: {span: 14},
    // rules: [{ required: true, message: '请选择上传文件' }],
    // 这里做上传图片后的处理
    componentProps: {
      api: uploadApi,
    }
  },
  {
    field: 'date',
    component: 'RangePicker',
    label: '领票时间',
    colProps: {span: 14},
    rules: [
      {required: true}
    ],
    componentProps: {
      showTime: true, // 显示时间选择器的时分秒
    }
  },
  {
    field: 'tinymce',
    component: 'Input',
    label: '演出简介',
    defaultValue: '',
    rules: [{ required: true }],
    render: ({ model, field }) => {
      return h(Tinymce, {
        value: model[field],
        onChange: (value: string) => {
          model[field] = value;
        },
      });
    },
  },
  {
    field: 'limit',
    component: 'Input',
    label: '每人限领',
    colProps: {span: 14},
    rules: [
      {required: true}
    ],
    componentProps: {
      type: 'number'
    }
  },
  {
    field: 'scope',
    component: 'Select',
    label: '领票范围',
    colProps: {span: 14},
    rules: [
      {required: true}
    ],
    componentProps: {
      options: [
        {
          label: '开放',
          value: '1',
          key: '1',
        },
        {
          label: '会员',
          value: '2',
          key: '2',
        },
        {
          label: '注册用户',
          value: '3',
          key: '3',
        }
      ]
    }
  },
  {
    field: 'area',
    component: 'Select',
    label: '开放区域',
    colProps: {span: 14},
    rules: [
      {required: true}
    ],
    componentProps: {
      options: [
        {
          label: '一楼',
          value: '1',
          key: '1',
        },
        {
          label: '二楼',
          value: '2',
          key: '2',
        }
      ]
    }
  },
  {
    field: 'stopSelect',
    component: 'Input',
    label: '禁选座位',
    colProps: {span: 14},
    slot: 'customSlot'
  },
  {
    field: 'remind',
    component: 'Input',
    label: '领票提醒',
    colProps: {span: 14},
  },
]

// 点击座位事件
const clickSeat = (data) => {
  const forbidData = []
  data.forEach((item) => {
    const {rowKey, col = []} = item;
    col.forEach((colItem) => {
      const { colKey, status} = colItem;
      if(status){
        forbidData.push(`${rowKey}排${colKey}座`)
      }
    })
  })
  stopSeat.value = forbidData
}


// 表单的基础设置
const [register, { setProps, setFieldsValue, updateSchema, validateFields }] = useForm({
  labelWidth: 120,
  wrapperCol: {
    span: 20,
    offset: 1
  },
  schemas,
  actionColOptions: { span: 24 },
  resetButtonOptions: {
    text: '回显',
    onClick: () => {
      // 编辑回显表单数据  座位 (暂时模拟 会先通过接口获取)
      setFieldsValue({
        serialNumber: 'RT90928172',
        name: '<<我和我的祖国>>',
        type: ['2'],
        date: [
            "2024-04-01 22:34:07",
            "2024-04-02 00:35:00"
        ],
        scope: ['2'],
        tinymce: "<p>1</p>",
        limit: "1",
        area: "2",
        remind: "111"
      })
      // 回显座位信息
      seatData.value = seatMessage
    }
  },
  submitButtonOptions: {
    text: '提交'
  }
});

// 提交按钮是事件
const handleSubmit = (values: any) => {
  setProps({submitButtonOptions: {loading: true}})
  validateFields().then(() => {
    console.log(values, '提交的数据')
    console.log(stopSeat.value, '禁用座位信息')
    setTimeout(() => {
      setProps({submitButtonOptions: {loading: false}})
      createMessage.success({
        content: '提交成功, 请在console中查看表单数据',
      });
    }, 2000)
  })
}

</script>
<style lang="less">
 .m-l-100{
  margin-left: 100px;
 }
 .m-t-20{
   margin-top: 20px;
 }
</style>
